<template>
    <div>
    <el-card :body-style="{ padding: '0px' }" shadow="hover">
      <img :src=picsrc class="image">
      <div style="padding: 14px;">
        <h1><i :class=whattype[type].icon></i>{{whattype[type].title}}</h1>
        <div class="bottom clearfix">
          <!-- <time class="time">{{ currentDate }}</time> -->
          <p>{{whattype[type].describe}}</p>
          <router-link :to=whattype[type].route><el-button type="primary" icon="el-icon-share" class="button">Have a Look</el-button></router-link>
        </div>
      </div>
    </el-card>
    </div>
</template>
<script>
export default {
  data () {
    return {
      whattype: [
        { pic_src: '@/assets/pics/1.jpeg', title: '实体关系统计', describe: '在实体关系统计模块，你可以得到小说中所有的人物、家族、城堡的数量以及他们的名字', route: '/entity', icon: 'el-icon-s-help' },
        { pic_src: '@/assets/pics/2.jpeg', title: '人物关系统计', describe: '在人物关系统计模块，你可以得到小说中所有的人物的关系以及他们各自是什么', route: '/character', icon: 'el-icon-user-solid' },
        { pic_src: '@/assets/pics/1.jpeg', title: '家族关系统计', describe: '在家族关系统计模块，你可以得到小说中所有的家族的关系以及他们各自是什么', route: '/house', icon: 'el-icon-s-home' },
        { pic_src: '@/assets/pics/1.jpeg', title: '城堡关系统计', describe: '在城堡关系统计模块，你可以得到小说中所有的城堡的关系以及他们各自是什么', route: '/castle', icon: 'el-icon-school' }
      ],
      picsrc: null
    }
  },
  mounted () {
    if (this.type === 0) {
      this.picsrc = require('@/assets/pics/1.jpeg')
    } else if (this.type === 1) {
      this.picsrc = require('@/assets/pics/2.jpeg')
    } else if (this.type === 2) {
      this.picsrc = require('@/assets/pics/9.jpeg')
    } else {
      this.picsrc = require('@/assets/pics/p6.jpg')
    }
  },
  props: {
    type: Number
  },
  methods: {
    getWhatType () {
      var ans = [
        { pic_src: '@/assets/pics/1.jpeg', title: '实体关系统计', describe: '在实体关系统计模块，你可以得到小说中所有的人物、家族、城堡的数量以及他们的名字' },
        { pic_src: '@/assets/pics/2.jpeg', title: '人物关系统计', describe: '在人物关系统计模块，你可以得到小说中所有的人物的关系以及他们各自是什么' },
        { pic_src: '@/assets/pics/9.jpeg', title: '家族关系统计', describe: '在家族关系统计模块，你可以得到小说中所有的家族的关系以及他们各自是什么' },
        { pic_src: '@/assets/pics/p6.jpg', title: '城堡关系统计', describe: '在城堡关系统计模块，你可以得到小说中所有的城堡的关系以及他们各自是什么' }
      ]
      return ans
    },
    jump () {
      this.$router.push({ name: 'login' })
    }
  }
}
</script>
<style scoped>
  .time {
    font-size: 13px;
    color: #999;
  }

  .button {
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }

  .clearfix:after {
      clear: both
  }
  p{
      line-height: 150%;
  }
  h1 i{
      margin-right: 20px;
  }
</style>
